<template>
  <div id="menu-page">
    <div class="app-header">
      <h4>视频素材批量生成工具 V{{version}}</h4>
    </div>
    <div class="template-list">
      <div class="sub-title">
        <h4>选择模板</h4>
      </div>
      <zi-row gutter="15">
        <zi-col v-for="item in templateList" :key="item.value" :span="6" class="template-item">
          <zi-card hoverable class="template-inner" @click="routerOpen(item.location)">
            <!-- <div class="tmp-icon">
              <img :src="item.icon" alt="template-preview">
            </div> -->
            <div class="name text-ellipsis">{{ item.name }}</div>
          </zi-card>
        </zi-col>
      </zi-row>
    </div>

    <zi-dialog
      v-model="dialog1.visible"
      cancel="取消"
      done="确认"
      :title="dialog1.title"
      :beforeDone="confirmUpdate"
      :closeByModal="false"
    >
      <p v-html="dialog1.text"></p>
    </zi-dialog>
  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    name: 'menu-page',
    data () {
      return {
        version: '0.3',
        dialog1: {
          visible: false,
          title: '',
          text: '检查到版本更新，请点击下载',
          link: 'https://www.baidu.com',
        },
        templateList: [
          {
            name: '720x1280 竖版视频生成',
            value: 'template-1',
            icon: 'static/imgs/template-1-demo.png',
            location: '/template-1'
          },
          {
            name: '视频批量转尺寸',
            value: 'template-2',
            location: '/template-2'
          },
          {
            name: '批量添加审核水印',
            value: 'template-3',
            location: '/template-3'
          },
        ],
      }
    },
    mounted: function() {
      // this.checkForUpdate()
    },
    methods: {
      routerOpen (link) {
        location.hash = `#${link}`
      },
      checkForUpdate() {
        const _this = this;
        const platform = require('os').platform();
        const version = this.version;
        const updateUrl = 'http://inmobi-rm-app.s3.amazonaws.com/CreativeUploads/china/image-batch-collage/update.json';
        // console.log(platform);
        // console.log(version);
        axios
          .get(updateUrl + '?v=' + Math.floor(Math.random()*10000+0) )
          .then(res => {
            let json = res.data;
            console.log(json);
            if (json[platform]){
              console.log('执行更新');
              const newVersion = json[platform].version;
              if ( parseFloat(newVersion) > parseFloat(version) ) {
                _this.dialog1 = {
                  visible: true,
                  title: `发现新版本 ${newVersion}`,
                  text: json[platform].desc.replace(/\|/g,"<br>"),
                  link: json[platform].url,
                }
              }
            }
          })
          .catch(e => {
            console.log(e);
          })
      },
      confirmUpdate() {
        this.$electron.shell.openExternal(this.dialog1.link)
      }
    }
  }
</script>

<style>
  @import url('~@/assets/styles/main.css');
  
</style>
